<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。">
    <meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
    <title>小兔鲜儿-新鲜、惠民、快捷！</title>
    <!-- 引入favicon图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!-- 引入初始化CSS文件 -->
    <link rel="stylesheet" href="css/base.css">
    <!-- 引入公共CSS文件 -->
    <link rel="stylesheet" href="css/common.css">
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="css/register.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
    <script src="js/register.js"></script>
</head>

<body>
    <!-- 顶部导航栏 -->
    <div class="navigation-bar">
        <div class="w">
            <ul>
                <li>
                    <a href="login.html">请先登录</a>
                </li>
                <li>
                    <a href="register.html">免费注册</a>
                </li>
                <li>
                    <a href="center-order.html">我的订单</a>
                </li>
                <li>
                    <a href="center.html">会员中心</a>
                </li>
                <li>
                    <a href="javascript:;">帮助中心</a>
                </li>
                <li>
                    <a href="javascript:;">在线客服</a>
                </li>
                <li>
                    <a href="javascript:;"><span></span>手机版</a>
                </li>
            </ul>
        </div>
    </div>

    <!-- 头部 -->
    <div class="header w">
        <!-- logo -->
        <div class="logo">
            <a href="javascript:;"></a>
        </div>
        <!-- 导航 -->
        <div class="nav">
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="javascript:;">生鲜</a></li>
                <li><a href="javascript:;">美食</a></li>
                <li><a href="javascript:;">餐厨</a></li>
                <li><a href="javascript:;">电器</a></li>
                <li><a href="javascript:;">家具</a></li>
                <li><a href="javascript:;">洗护</a></li>
                <li><a href="javascript:;">孕婴</a></li>
                <li><a href="javascript:;">服装</a></li>
            </ul>
        </div>
        <!-- 搜索框 -->
        <div class="search">
            <span></span>
            <input type="text" placeholder="搜一搜">
        </div>
        <!-- 购物车 -->
        <div class="shopping-cart">
            <span>2</span>
        </div>
    </div>

    <!-- 注册界面 -->
    <div class="xtx-register">
        <div class="container">
            <!-- 卡片 -->
            <div class="xtx-card">
                <h3>新用户注册</h3>
                <form action="" class="xtx-form">
                    <div data-prop="username" class="xtx-form-item">
                        <input type="text" name="username" placeholder="设置用户名称">
                        <span class="msg"></span>
                    </div>
                    <div data-prop="phone" class="xtx-form-item">
                        <input type="text" name="phone" placeholder="输入手机号">
                        <span class="msg"></span>
                    </div>
                    <div data-prop="code" class="xtx-form-item">
                        <input type="text" name="code" placeholder="短信验证码">
                        <span class="msg"></span>
                        <a href="javascript:;" class="code">发送验证码</a>
                    </div>
                    <div data-prop="password" class="xtx-form-item">
                        <input type="password" name="password" placeholder="设置6至20位字母、数字和符号组合">
                        <span class="msg"></span>
                    </div>
                    <div data-prop="confirm" class="xtx-form-item">
                        <input type="password" name="confirm" placeholder="请再次输入上面密码">
                        <span class="msg"></span>
                    </div>
                    <div class="xtx-form-item pl50">
                        <i class="iconfont icon-queren"></i>
                        已阅读并同意<a href="javascript:;">《用户服务协议》</a>
                    </div>
                    <div class="xtx-form-item">
                        <button class="submit">下一步</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <!-- 公共底部 -->
    <div class="xtx_footer clearfix">
        <div class="w">
            <!-- 联系我们 -->
            <div class="contact clearfix">
                <dl>
                    <dt>客户服务</dt>
                    <dd class="service">在线客服</dd>
                    <dd class="feedback">问题反馈</dd>
                </dl>
                <dl>
                    <dt>关注我们</dt>
                    <dd class="weixin">公众号</dd>
                    <dd class="weibo">微博</dd>
                </dl>
                <dl>
                    <dt>下载APP</dt>
                    <dd class="code">
                        <img src="uploads/qrcode.jpg" alt="">
                    </dd>
                    <dd class="download">
                        <span>扫描二维码</span>
                        <span>立即下载APP</span>
                        <a href="javascript:;">下载页面</a>
                    </dd>
                </dl>
                <dl>
                    <dt>服务热线</dt>
                    <dd class="hotline">
                        400-0000-000
                        <small>周一至周日 8:00-18:00</small>
                    </dd>
                </dl>
            </div>
        </div>

        <!-- 其他 -->
        <div class="extra">
            <div class="w">
                <!-- 口号 -->
                <div class="slogin">
                    <a href="javascript:;" class="price">价格亲民</a>
                    <a href="javascript:;" class="logistics">物流快捷</a>
                    <a href="javascript:;" class="quality">品质新鲜</a>
                </div>
                <!-- 版权信息 -->
                <div class="copyright">
                    <p>
                        <a href="javascript:;">关于我们</a>
                        <a href="javascript:;">帮助中心</a>
                        <a href="javascript:;">售后服务</a>
                        <a href="javascript:;">配送与验收</a>
                        <a href="javascript:;">商务合作</a>
                        <a href="javascript:;">搜索推荐</a>
                        <a href="javascript:;">友情链接</a>
                    </p>
                    <p>CopyRight &copy; 小兔鲜儿</p>
                </div>
            </div>
        </div>
    </div>
</body>

</html>